<template>
  <div>
    <BaseModal v-model="show" width="480" title="学校" @on-ok="saveForm" @on-cancel="cancel">
      <Form
        :model="saveSchoolParams"
        ref="saveSchoolParams"
        :rules="formValidate"
        :label-width="120"
      >
        <FormItem label="学校名称" prop="schoolCode">
          <Select
            v-model="saveSchoolParams.schoolCode"
            filterable
            remote
            :remote-method="searchSchool"
            :loading="loading"
            placeholder="请选择..."
            transfer
          >
            <Option
              v-for="(option, index) in schoolSelectList"
              :value="option.schoolCode"
              :key="index"
              >{{ option.schoolName }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="学校代码">
          <Input
            readonly
            v-model="saveSchoolParams.schoolCode"
            placeholder="选择学校后显示"
            :disabled="saveSchoolParams.schoolCode === ''"
          ></Input>
        </FormItem>
      </Form>
    </BaseModal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import BaseModal from "@components/iv-modal/BaseModal.vue";
import { Form } from "iview";
import { initAllSchool, saveSchool } from "@/api/service.js";
import { SchoolParams } from "@/store/interface.ts";
@Component({
  components: {
    BaseModal
  }
})
export default class AddSchool extends Tools {
  public $refs!: {
    saveSchoolParams: Form;
  };
  @Prop()
  private value!: boolean;
  private loading: boolean = false;
  private schoolSelectList: Array<any> = [];
  private saveSchoolParams: SchoolParams = {
    schoolCode: "",
    schoolType: 1,
    schoolName: ""
  };

  @Watch("saveSchoolParams.schoolCode", { immediate: true, deep: true })
  private schoolCode(val: string) {
    if (val) {
      this.saveSchoolParams.schoolName = this.schoolSelectList.find(
        //自动检索是否含有值
        it => it.schoolCode === val
      ).schoolName;
    } else {
      this.saveSchoolParams.schoolName = "";
    }
  }

  private get initAllSchoolParams() {
    return {
      params: { searchKey: "" }
    };
  }
  private get show() {
    return this.value;
  }
  private set show(value) {
    // 若第一次点击新增，关闭弹层，第二次点击则没有反应,show计算属性值没有及时派发事件
    this.$emit("input", value);
    //第一次弹窗新增层，关闭弹层，第二次点击弹窗，表单需要置空文本域
  }
  private get formValidate() {
    return {
      schoolCode: { required: true, message: "请选择学校", trigger: "change" }
    };
  }

  private submit() {}
  /**
   * 搜索查询
   */
  private searchSchool(val) {
    this.initAllSchoolParams.params.searchKey = val;
    this.initAllSchool();
  }
  private async initAllSchool() {
    this.loading = true;
    const [err, data] = await initAllSchool(this.initAllSchoolParams);
    this.loading = false;
    if (err) {
      const msg = err || "获取学校列表错误";
      this.$Message.error(msg);
      msg;
      return;
    }
    if (!data) return;
    this.schoolSelectList = data;
  }
  private saveForm() {
    this.$refs.saveSchoolParams.validate(async valid => {
      if (valid) {
        let result = await this.saveSchool(); //缺少同步
        if (true) {
          this.cancel(); //也需要重置form表单校验
        }
      }
    });
  }
  private async saveSchool() {
    const [err] = await saveSchool(this.saveSchoolParams);
    if (err) {
      const msg = err || "保存失败";
      this.$Message.error(msg);
      return false;
    }
    this.$Message.success("保存成功");
    return true;
  }
  private cancel() {
    this.$refs.saveSchoolParams.resetFields();
    this.searchSchool(""); //取消调用查询所有列表
    this.show = false;
  }
  mounted() {
    this.initAllSchool();
  }
}
</script>
